<template>
  <div class="page-member-manage-label mod-member-label">
    <div class="title">
      {{ $t('user.allLabels') }}
    </div>
    <div class="tabs">
      <el-tabs>
        <!-- 条件标签 -->
        <el-tab-pane :label="$t('user.conditionLabel')">
          <div class="btn-bar">
            <div
              class="default-btn primary-btn"
              @click="onShowEditFrame('',1)"
            >
              {{ $t('user.addLabel') }}
            </div>
            <div
              class="default-btn"
              @click="onRefreshLabel()"
            >
              {{ $t('user.updateLabelData') }}
            </div>
            <div class="font-line">
              {{ $t('user.updateTime') }}：{{ (customLabelList[0]?.statisticUpdateTime) ? customLabelList[0].statisticUpdateTime : '暂无更新' }}
            </div>
          </div>
          <!-- 不同标签内容 -->
          <div class="label-container">
            <!-- 自定义标签 -->
            <div class="label-tips">
              <span class="label-type">{{ $t('user.customConditionLabel') }}</span>
              <span class="label-tips">{{ $t('user.customConditionLabelTips') }}</span>
            </div>
            <div class="label-content">
              <div
                v-for="(item, index) in customLabelList"
                :key="index"
                class="label-item"
              >
                <div class="label-name">
                  {{ item.tagName }}
                </div>
                <div class="font-line">
                  {{ $t('user.peopleNum') }}：{{ item.userNum }}
                </div>
                <div class="font-line">
                  {{ $t('user.creationTime') }}：{{ item.createTime }}
                </div>
                <!-- <div class="switch">（已开启）</div> -->
                <div class="op-btn-wrapper">
                  <span @click="onShowEditFrame(item.userTagId,1)">{{ $t('user.editBtn') }}</span>
                  <span @click="onDeleteLabel(item.userTagId)">{{ $t('user.deleteBtn') }}</span>
                </div>
              </div>
              <div
                v-if="customLabelList.length === 0"
                class="no-data"
              >
                {{ $t('user.noData') }}
              </div>
            </div>
          </div>
        </el-tab-pane>
        <!-- 手动标签 -->
        <el-tab-pane :label="$t('user.manualLabel')">
          <div
            class="default-btn primary-btn"
            @click="onShowEditFrame('',0)"
          >
            {{ $t('user.addLabel') }}
          </div>
          <!-- 标签内容 -->
          <div class="label-container">
            <!-- 手动标签 -->
            <div class="label-tips">
              <span class="label-type">{{ $t('user.manualLabel') }}</span>
            </div>
            <div class="label-content">
              <div
                v-for="(item, index) in manualLabelList"
                :key="index"
                class="label-item"
              >
                <div class="label-name">
                  {{ item.tagName }}
                </div>
                <div class="font-line">
                  {{ $t('user.peopleNum') }}：{{ item.userNum }}
                </div>
                <div class="font-line">
                  {{ $t('user.creationTime') }}：{{ item.createTime }}
                </div>
                <div class="op-btn-wrapper">
                  <span @click="onShowEditFrame(item.userTagId,0)">{{ $t('user.editBtn') }}</span>
                  <span @click="onDeleteLabel(item.userTagId)">{{ $t('user.deleteBtn') }}</span>
                </div>
              </div>
              <div
                v-if="manualLabelList.length === 0"
                class="no-data"
              >
                {{ $t('user.noData') }}
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 新增/编辑标签 -->
    <user-label-edit
      v-if="isShowEditFrame"
      ref="addOrEditRef"
      @refresh-label-list="onAddOrEditSucc"
    />
  </div>
</template>

<script setup>
import userLabelEdit from './components/user-label-edit.vue'
import { ElMessage } from 'element-plus'

const isShowEditFrame = ref(false)
const customLabelList = ref([])
const manualLabelList = ref([])
onMounted(() => {
  getCustomLabelList()
})

// 新增弹窗
const addOrEditRef = ref(null)
const onShowEditFrame = (userTagId, tagType) => {
  isShowEditFrame.value = true
  nextTick(() => {
    addOrEditRef.value?.init(userTagId, tagType)
  })
}
// 获取自定义标签列表
const getCustomLabelList = () => {
  http({
    url: http.adornUrl('/user/userTag/getTagList'),
    method: 'get',
    params: http.adornParams()
  }).then(({ data }) => {
    const _customLabelList = []
    const _manualLabelList = []
    for (let i = 0; i < data.length; i++) {
      if (data[i].tagType === 1) {
        _customLabelList.push(data[i])
      } else if (data[i].tagType === 0) {
        _manualLabelList.push(data[i])
      }
    }
    customLabelList.value = _customLabelList
    manualLabelList.value = _manualLabelList
  })
}
const onRefreshLabel = () => {
  if (!customLabelList.value.length) {
    ElMessage.warning($t('user.noDataAvailablePleaseAddTag'))
    return
  }
  http({
    url: http.adornUrl('/user/userTag/batchRefresh'),
    method: 'GET',
    data: http.adornData({})
  }).then(() => {
    getCustomLabelList()
    ElMessage.success($t('user.updateSucceeded'))
  })
}

const onDeleteLabel = (userTagId) => {
  http({
    url: http.adornUrl('/user/userTag/' + userTagId),
    method: 'DELETE',
    data: http.adornData({})
  }).then(() => {
    getCustomLabelList()
    ElMessage.success($t('user.deletionSucceeded'))
  })
}
const onAddOrEditSucc = (data) => {
  isShowEditFrame.value = false
  if (data) {
    getCustomLabelList()
  }
}

</script>

<style lang="scss" scoped>
.page-member-manage-label.mod-member-label {
  .title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .btn-bar {
    display: flex;
    align-items: end;

    .font-line {
      margin-left: 10px;
      padding-bottom: 5px;
    }
  }

  .tabs {
    .label-container {
      background-color:#f2f2f6 ;
      padding: 10px;
      margin-top:10px ;
      border-radius: 10px;
      .label-tips {
        margin: 15px 0 10px 0;
        .label-type{
          font-size: 16px;
          font-weight: bold;
        }
        .label-tips {
          font-size: 14px;
          color: #999;
          margin-left: 15px;
        }
      }
      .label-content {
        display: flex;
        flex-wrap: wrap;
        .label-item {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 215px;
          height: 120px;
          padding: 12px;
          font-size: 12px;
          color: #666;
          background: white;
          border: 1px solid #E8E9EC;
          border-radius: 4px;
          margin: 0 12px 12px 0;
          .label-name {
            font-size: 14px;
            color: #000;
          }
          .op-btn-wrapper {
            text-align: right;
            & span {
              color: #155bd4;
              cursor: pointer;
              margin-left: 8px;
            }
          }
        }
      }
    }
  }
}
.no-data{
  line-height: 24px;
    color: #999;
    text-align: center;
    margin:auto
}
</style>
